{% extends 'base_head.html' %}
{% block head %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/shoe_page.css' %}">
    <!-- {% block title %}Обзор | Crossboost{% endblock %} -->
    {{ block.super }}
{% endblock %}
{% block navbar %}
    {{ block.super }}
{% endblock %}
{% block content %}
<main role="main" class="main">
<div class="container">
  <div class="row carousel-flex">
    <div class="col-md-6 col-md-offset-2 wrapper">
       <div id="carousel" class="carousel slide" data-interval="false" data-ride="carousel">
           {% if shoe_images|length == 0  %}
               <img src="{{ shoe.image.url }}">
           {% endif %}
        <div class="carousel-inner">
         {% for image in shoe_images %}
         <div class="carousel-item {% if forloop.first %}active{% endif %} modal-trigger-image">
             <img src="{{ image.image.url }}" data-toggle="modal" data-target="#imageModal" onclick="setImageSrc(this.src);">
         </div>
            <!-- Модальное окно -->
            <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-body">
                    <img id="modalImage" class="img-fluid">
                  </div>
                </div>
              </div>
            </div>
         {% endfor %}
        </div>
       </div>
       <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false" data-ride="carousel">
         <div class="carousel-inner">
          <div class="item {% if forloop.first %}active{% endif %}">
           {% for image in shoe_images %}
               <div data-target="#carousel" data-slide-to="{{ forloop.counter0 }}" class="thumb">
                   <img src="{{ image.image.url }}">
               </div>
           {% endfor %}
          </div>
         </div>


        </div>
       </div>
      </div>


                <div class="shoeContent col-6" id="product">
                    <div class="shoeName">
                        <p class="shoeId">{{shoe.id}}</p>
                        <p class="shoeBrand">{{shoe.brand.name}}</p>
                        <h2> {{shoe.name}}</h2>
                    </div>
                    <div class="sizes">
                        {% csrf_token %}
                        <form method="post" class="small-display-size">

                            <select class=" form-select form-select-lg mb-3" aria-label="Large select example"style="width: 100%">
                                <option selected>Выбрать размер</option>
                                  {% for size in sizes %}
                                      <option value="{{ size.0 }}">{{ size }}</option>
                                  {% endfor %}
                            </select>
                            <button type="submit" class="btn btn-dark" id="to-cart-button">В корзину</button>
                        </form>
                        <form id="size-form" method="post">
                            {% csrf_token %}
                            <div class="sizes-container">
                                {% for size in sizes %}
                                <div class="size-box">
                                    {{ size }}
                                </div>
                                {% endfor %}                            
                                        <input type="hidden" id="selected_size" name="selected_size" value="">
                                        <input type="hidden" name="shoe_id" value="{{ shoe.id }}">
                                        <button type="submit" class="btn btn-dark" style="align-items: center;"
                                                id="add-to-cart-btn">Выберите размер</button>
                            </div>
                        </form>
                            <div class="col-6">
                                <h2 class="product-price">₽{{shoe.price}}</h2>
                            </div>
                </div>
            </div>
        </div>

    </div>
                <hr class="my-4">
                <div class="row" id="shoeDescription">
                    <p class="col-10 description">{{shoe.desc}}</p>

                    <div class="col-md-12 bottom-rule">
                    </div>
                </div>
            <hr class="my-4">
            <h3 class="text-center" id="would-like">Вам может понравиться:</h3>
        <div class="row text-center justify-content-center">
            {% for shoe in related_shoes %}
            <div class="col-lg-2 col-md-3 col-sm-4 mb-5">
                <div class="card border-0 h-100">
                    <a href="/shoe/{{shoe.id}}">
                        <img src="{{shoe.image.url}}" alt="" width="100%">
                    </a>
                    <div class="card-body">
                        <p class="card-title">
                            <a class ="text-secondary"
                                                 href="/shoe/{{shoe.id}}">{{shoe.brand.name}} {{shoe.model}}
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            {% endfor %}
            
        </div>
</main>
<script src="{% static 'js/size-selection.js' %}"></script>
<script src="{% static 'js/modal-window.js' %}"></script>
<script src="{% static 'js/carousel-width.js' %}"></script>
{% endblock %}
